<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog"
  aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{ backdrop: 'static', keyboard: !saving }">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form *ngIf="active" #userForm="ngForm" novalidate autocomplete="off">
        <div class="modal-header">
          <h4 class="modal-title">
            <span>关键过程申请</span>
          </h4>
          <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')" [disabled]="saving">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body"  style="height: 500px; overflow: auto;">
          <p-tabView>
            <p-tabPanel header="申请单">
              <div class="align-items-center" style="border: 1px solid #c7cdd9;padding: 0.571em 1em; ">
                <div class="row">
                  <div class="form-group col-md-2">
                    <label for="code">申请单号 *</label>
                  </div>
                  <div class="form-group col-md-10">
                    <input id="code" #codeInput="ngModel" type="text" name="code" class="form-control"
                      [(ngModel)]="workflow.code" disabled maxlength="256" />
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-md-2">
                    <label for="technicalQualityAgreementCode">技术质量协议编号 *</label>
                  </div>
                  <div class="form-group col-md-10">
                    <input id="technicalQualityAgreementCode" #technicalQualityAgreementCodeInput="ngModel" type="text"
                      name="technicalQualityAgreementCode" class="form-control"
                      [(ngModel)]="workflow.technicalQualityAgreementCode" required maxlength="256" />
                    <validation-messages [formCtrl]="technicalQualityAgreementCodeInput"></validation-messages>
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-md-2">
                    <label for="supplierUnit">供方单位 *</label>
                  </div>
                  <div class="form-group col-md-10">
                    <p-multiSelect [options]="SupplierAyy" [resetFilterOnHide]='true' [selectionLimit]=3
                      name="supplierUnit" [(ngModel)]="supplierUnits" [panelStyle]="{minWidth:'12em'}"></p-multiSelect>
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-md-2">
                    <label for="flowExplain">外协原因</label>
                  </div>
                  <div class="form-group col-md-10">
                    <textarea pInputTextarea name="flowExplain" class="form-control" [rows]="6" autoResize="autoResize"
                      [(ngModel)]="workflow.explain"></textarea>
                  </div>
                </div>
              </div>
            </p-tabPanel>
            <p-tabPanel header="外包项目">
              <div
                style="border: 1px solid #c7cdd9;margin-bottom: 10px;border-top-left-radius:4px;border-top-right-radius: 4px;">
                <p-panel header="任务筛选" [toggleable]="true">
                  <div class="col-xl-12" style="padding-right: 0px; padding-left: 0px;">
                    <div class="form-group m-form__group">
                      <div class="input-group">
                        <input [(ngModel)]="filterText" name="filterText" autoFocus class="form-control m-input"
                          style="border-right: none;" [placeholder]="l('SearchWithThreeDot')" type="text">
                        <span class="input-group-btn">
                          <button (click)="getTasks()" class="btn btn-primary"><i class="flaticon-search-1"
                              [attr.aria-label]="l('Search')"></i></button>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="row" style="overflow: auto;">
                    <div class="align-items-center">
                      <!--<Primeng-TurboTable-Start>-->
                      <div class="primeng-datatable-container">
                        <p-table #taskdataTable [value]="primengTableHelper.records"
                          rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true"
                          [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                          [resizableColumns]="primengTableHelper.resizableColumns">
                          <ng-template pTemplate="header">
                            <tr>
                              <th style="width: 50px">
                                操作</th>
                              <th style="width: 150px" pSortableColumn="code">
                                任务号
                                <p-sortIcon field="isActive"></p-sortIcon>
                              </th>
                              <th style="width: 150px" pSortableColumn="displayName">
                                名称
                                <p-sortIcon field="isActive"></p-sortIcon>
                              </th>
                              <th style="width: 150px" pSortableColumn="picNo">
                                图号
                                <p-sortIcon field="isActive"></p-sortIcon>
                              </th>
                              <th style="width: 150px" pSortableColumn="model">
                                型号
                                <p-sortIcon field="isActive"></p-sortIcon>
                              </th>
                              <th style="width: 250px" pSortableColumn="portion">
                                部段
                                <p-sortIcon field="isActive"></p-sortIcon>
                              </th>
                              <th style="width: 80px" pSortableColumn="amount">
                                数量
                                <p-sortIcon field="isActive"></p-sortIcon>
                              </th>
                              <th style="width: 130px" pSortableColumn="requiredDate">
                                交付时间
                                <p-sortIcon field="isActive"></p-sortIcon>
                              </th>
                              <th style="width: 120px">
                                外协申请
                              </th>
                              <th style="width: 120px">
                                交付/加工
                              </th>
                              <th style="width: 200px">
                                备注
                              </th>
                            </tr>
                          </ng-template>
                          <ng-template pTemplate="body" let-record="$implicit">
                            <tr>
                              <td style="width: 50px">
                                <img (click)="joinTask(record)" src="../../../assets/common/images/addIcon.png"
                                  style="cursor: pointer;" />
                              </td>
                              <td style="width: 150px">
                                {{record.code}}
                              </td>
                              <td style="width: 150px">
                                {{record.displayName}}
                              </td>
                              <td style="width: 150px">
                                {{record.picNo}}
                              </td>
                              <td style="width: 150px">
                                {{record.model}}
                              </td>
                              <td style="width: 250px">
                                {{record.portion}}
                              </td>
                              <td style="width: 80px">
                                {{record.amount}}
                              </td>
                              <td style="width: 130px">
                                {{record.requiredDate | momentFormat:'L'}}

                              </td>
                              <td style="width: 120px">
                                0/0
                              </td>
                              <td style="width: 120px">
                                0/0
                              </td>
                              <td style="width: 200px">
                                {{record.explain}}
                              </td>
                            </tr>
                          </ng-template>
                        </p-table>
                        <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                          {{'NoData' | localize}}
                        </div>
                        <div class="primeng-paging-container">
                          <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                            (onPageChange)="getTasks($event)" [totalRecords]="primengTableHelper.totalRecordsCount"
                            [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">

                          </p-paginator>
                          <span class="total-records-count">
                            {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                          </span>
                        </div>
                      </div>

                      <!--<Primeng-TurboTable-End>-->
                    </div>
                  </div>
                </p-panel>
              </div>
              <div style="border: 1px solid #c7cdd9;border-top-left-radius:4px;border-top-right-radius: 4px;">
                <p-panel header="外协任务" [toggleable]="true">

                  <div class="align-items-center">
                    <!--<Primeng-TurboTable-Start>-->
                    <div class="primeng-datatable-container">
                      <p-table #dataTable dataKey="taskForModelId" (onLazyLoad)="getOutsourcing($event)"
                        [value]="Outsourcings" [lazy]="true" editMode='row' [scrollable]="true" ScrollWidth="100%">
                        <ng-template pTemplate="header">
                          <tr>
                            <th style="width: 150px">
                              操作</th>
                            <th style="width: 150px">
                              任务号
                            </th>
                            <th style="width: 150px">
                              产品图号
                            </th>
                            <th style="width: 150px">
                              产品名称
                            </th>
                            <th style="width: 150px">
                              任务数量
                            </th>
                            <th style="width: 150px">
                              加工状态
                            </th>
                            <th style="width: 150px">
                              交付进度
                            </th>
                            <th style="width: 120px">
                              数量
                            </th>
                            <th style="width: 120px">
                              参考单价
                            </th>
                            <th style="width: 120px">
                              参考总价
                            </th>
                            <th style="width: 120px">
                              备注
                            </th>
                          </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-rowData let-editing="editing" let-ri='rowIndex'>
                          <tr [pEditableRow]='rowData'>
                            <td style="width: 150px">
                              <button *ngIf="!editing" pButton type="button" icon="pi pi-trash" class="ui-button-info"
                                style="margin-right: .5em" (click)="deleteRow(rowData)"></button>
                              <button *ngIf="!editing" pButton type="button" pInitEditableRow icon="pi pi-pencil"
                                class="ui-button-info" (click)="onRowEditInit(rowData)"></button>
                              <button *ngIf="editing" pButton type="button" pSaveEditableRow icon="pi pi-check"
                                class="ui-button-success" style="margin-right: .5em"
                                (click)="onRowEditSave(rowData)"></button>
                              <button *ngIf="editing" pButton type="button" pCancelEditableRow icon="pi pi-times"
                                class="ui-button-danger" (click)="onRowEditCancel(rowData, ri)"></button>
                            </td>
                            <td style="width: 150px">
                              {{rowData.taskCode}}
                            </td>
                            <td style="width: 150px">
                              {{rowData.picNo}}
                            </td>
                            <td style="width: 150px">
                              {{rowData.taskName}}
                            </td>
                            <td style="width: 150px">
                              {{rowData.taskCount}}
                            </td>
                            <td style="width: 150px">
                              <!-- 加工状态 -->
                              <p-cellEditor>
                                <ng-template pTemplate="input">
                                  <input pInputText type="text" style='width:70px;' name='deliveryRate'
                                    [(ngModel)]="rowData.workStatus" required>
                                </ng-template>
                                <ng-template pTemplate="output">
                                  {{rowData.workStatus}}
                                </ng-template>
                              </p-cellEditor>
                            </td>
                            <td style="width: 150px">
                              <!-- 交付进度 -->
                              <p-cellEditor>
                                <ng-template pTemplate="input">
                                  <input pInputText type="text" style='width:70px;' name='deliveryRate'
                                    [(ngModel)]="rowData.deliveryRate" required bsDatepicker>
                                </ng-template>
                                <ng-template pTemplate="output">
                                  {{rowData.deliveryRate | momentFormat:'L'}}
                                </ng-template>
                              </p-cellEditor>
                            </td>
                            <td style="width: 120px">
                              <!-- 数量 -->
                              <p-cellEditor>
                                <ng-template pTemplate="input">
                                  <input pInputText type="text" style='width:70px;' #outsourcingInput
                                    name='outsouringAmount' [(ngModel)]="rowData.outsouringAmount" required>
                                  <validation-messages [formCtrl]="outsourcingInput"></validation-messages>
                                </ng-template>
                                <ng-template pTemplate="output">
                                  {{rowData.outsouringAmount}}
                                </ng-template>
                              </p-cellEditor>
                            </td>
                            <td style="width: 120px">
                              <p-cellEditor>
                                <ng-template pTemplate="input">
                                  <div class="ui-inputgroup">
                                    <span class="ui-inputgroup-addon">¥</span>
                                    <input pInputText type="text" style='width:90px;' name='unitPrice'
                                      [(ngModel)]="rowData.unitPrice" required>
                                  </div>
                                </ng-template>
                                <ng-template pTemplate="output">
                                  {{rowData.unitPrice}}
                                </ng-template>
                              </p-cellEditor>
                            </td>
                            <td style="width: 120px">
                              <!-- 准结工时 -->
                              {{rowData.unitPrice*rowData.outsouringAmount}}
                            </td>
                            <td style="width: 120px">
                              <p-cellEditor>
                                <ng-template pTemplate="input">
                                  <input pInputText type="text" style='width:120px;' #remarkInput name='remark'
                                    [(ngModel)]="rowData.remark" required>
                                  <validation-messages [formCtrl]="remarkInput"></validation-messages>
                                </ng-template>
                                <ng-template pTemplate="output">
                                  {{rowData.remark}}
                                </ng-template>
                              </p-cellEditor>
                            </td>
                          </tr>
                        </ng-template>
                      </p-table>
                      <div class="primeng-no-data" *ngIf="Outsourcings.length == 0">
                        {{'NoData' | localize}}
                      </div>
                    </div>

                  </div>
                </p-panel>
              </div>
            </p-tabPanel>
            <p-tabPanel header="审批人">
              <div style="border: 1px solid #c7cdd9;padding: 0.571em 1em; ">
                <div class="row">
                  <div class="form-group col-md-2">
                    <label for="Code">申请单位经办人 </label>
                  </div>
                  <div class="form-group col-md-10">
                    <span>{{selectedCar3}}</span>
                    <p-dropdown [options]="users" name='workshopManager' [(ngModel)]="stepusers.workshopManager"
                      [group]="true" [filter]='true'>
                      <ng-template let-group pTemplate="group">
                        {{group.label}}
                      </ng-template>
                    </p-dropdown>
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-md-2">
                    <label for="Code">申请单位主管领导 </label>
                  </div>
                  <div class="form-group col-md-10">
                    <span>{{selectedCar3}}</span>
                    <p-dropdown [options]="users" name='workShopLeader' [(ngModel)]="stepusers.workShopLeader"
                      [group]="true" [filter]='true'>
                      <ng-template let-group pTemplate="group">
                        {{group.label}}
                      </ng-template>
                    </p-dropdown>
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-md-2">
                    <label for="Code">计划生产处型号主管 </label>
                  </div>
                  <div class="form-group col-md-10">
                    <span>{{selectedCar3}}</span>
                    <p-dropdown [options]="users" name='plannedProductionModelManager'
                      [(ngModel)]="stepusers.plannedProductionModelManager" [group]="true" [filter]='true'>
                      <ng-template let-group pTemplate="group">
                        {{group.label}}
                      </ng-template>
                    </p-dropdown>
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-md-2">
                    <label for="Code">计划生产处主管处长 </label>
                  </div>
                  <div class="form-group col-md-10">
                    <span>{{selectedCar3}}</span>
                    <p-dropdown [options]="users" name='plannedProductionLeader'
                      [(ngModel)]="stepusers.plannedProductionLeader" [group]="true" [filter]='true'>
                      <ng-template let-group pTemplate="group">
                        {{group.label}}
                      </ng-template>
                    </p-dropdown>
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-md-2">
                    <label for="Code">质量处主管处长 </label>
                  </div>
                  <div class="form-group col-md-10">
                    <span>{{selectedCar3}}</span>
                    <p-dropdown [options]="users" name='qualityDepartmentLeader'
                      [(ngModel)]="stepusers.qualityDepartmentLeader" [group]="true" [filter]='true'>
                      <ng-template let-group pTemplate="group">
                        {{group.label}}
                      </ng-template>
                    </p-dropdown>
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-md-2">
                    <label for="Code">工艺处主管处长 </label>
                  </div>
                  <div class="form-group col-md-10">
                    <span>{{selectedCar3}}</span>
                    <p-dropdown [options]="users" name='technicalManager' [(ngModel)]="stepusers.technicalManager"
                      [group]="true" [filter]='true'>
                      <ng-template let-group pTemplate="group">
                        {{group.label}}
                      </ng-template>
                    </p-dropdown>
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-md-2">
                    <label for="Code">计划生产处处长</label>
                  </div>
                  <div class="form-group col-md-10">
                    <span>{{selectedCar3}}</span>
                    <p-dropdown [options]="users" name='plannedProductionDirector'
                      [(ngModel)]="stepusers.plannedProductionDirector" [group]="true" [filter]='true'>
                      <ng-template let-group pTemplate="group">
                        {{group.label}}
                      </ng-template>
                    </p-dropdown>
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-md-2">
                    <label for="Code">副总指挥(副总工程师)</label>
                  </div>
                  <div class="form-group col-md-10">
                    <span>{{selectedCar3}}</span>
                    <p-dropdown [options]="users" name='chiefEngineer' [(ngModel)]="stepusers.chiefEngineer"
                      [group]="true" [filter]='true'>
                      <ng-template let-group pTemplate="group">
                        {{group.label}}
                      </ng-template>
                    </p-dropdown>
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-md-2">
                    <label for="Code">顾客代表</label>
                  </div>
                  <div class="form-group col-md-10">
                    <span>{{selectedCar3}}</span>
                    <p-dropdown [options]="users" name='customerRepresentative'
                      [(ngModel)]="stepusers.customerRepresentative" [group]="true" [filter]='true'>
                      <ng-template let-group pTemplate="group">
                        {{group.label}}
                      </ng-template>
                    </p-dropdown>
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-md-2">
                    <label for="Code">公司领导</label>
                  </div>
                  <div class="form-group col-md-10">
                    <span>{{selectedCar3}}</span>
                    <p-dropdown [options]="users" name='companyLeader' [(ngModel)]="stepusers.companyLeader"
                      [group]="true" [filter]='true'>
                      <ng-template let-group pTemplate="group">
                        {{group.label}}
                      </ng-template>
                    </p-dropdown>
                  </div>
                </div>
              </div>
            </p-tabPanel>
          </p-tabView>
        </div>
        <div class="modal-footer">
          <button [disabled]="saving" type="button" class="btn btn-default" (click)="close()">
            取消
          </button>
          <button type="submit" (click)="save()" class="btn btn-primary2" [disabled]="!userForm.form.valid"
            [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')">
            <i class="fa fa-save"></i> <span>申请</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>